<template>
  <div>
    <goga-header title="用户登录">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div class="form-wrapper">
      <form>
        <section class="form-group">
          <input type="text" placeholder="您的手机号" v-model.trim="model.uPhone">
        </section>
        <section class="form-group">
          <input v-if="!showPwd" type="password" placeholder="用户密码" v-model.trim="model.uPwd">
          <input v-if="showPwd" type="text" placeholder="用户密码" v-model.trim="model.uPwd">
          <div class="xxcf-switch">
            <input class="xxcf-switch-core" type="checkbox" id="isDefault" v-model="showPwd">
          </div>
        </section>
        <section class="form-group">
          <input type="text" placeholder="验证码" v-model.trim="model.picCod">
          <div class="yz-code" @click="updataCodPic">
            <img :src="codPic">
          </div>
        </section>
        <div class="link" ><router-link to="forget">忘记密码?</router-link></div>
        <div class="btn-group">
          <button class="btn btn-default" @click.prevent="submit" v-bind:disabled="disabled">用户登录</button>
        </div>
        <div class="btn-group">
          <router-link to="register" class="btn btn-white" replace>立即注册</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="babel">
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import {validate} from '@utils'
  import api from '@api'
  import {cookie} from '@utils'
  export default {
    components: {
      gogaHeader,
      Icon
    },
    data() {
      return {
        loginDisabled: false,
        loginForm: {},
        model: {
          uPhone: '',
          uPwd: '',
          picCod: ''
        },
        showPwd: false,
        disabled: false,
        codPic: 'http://www.gogagoga.cc/api/verCode/tpcode.ashx'
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      updataCodPic: function () {
        let url = 'http://www.gogagoga.cc/api/verCode/tpcode.ashx?='
        this.codPic = url + Math.random()
      },
      async submit() {
        if(!validate.mobile(this.model.uPhone)) {
          this.$store.dispatch('global/toast', '请输入正确的手机号码');
          return false;
        }

        if(!validate.minLength(this.model.uPwd, 6)) {
          this.$store.dispatch('global/toast', '请输入密码');
          return false;
        }
        if(!validate.minLength(this.model.picCod, 1)) {
          this.$store.dispatch('global/toast', '请输入验证码');
          return false;
        }
        this.disabled = true;
        let {data: {StatusCode, Status}, headers: {token}} = await api.post('api/v2/Log/log.ashx', Object.assign(this.model, {tType: 'WAP'}))
        if (StatusCode === '200') {
          cookie('SHOP_TOKEN', token)
          this.$store.dispatch('global/toast', '登录成功');
          this.goBack()
        } else if(StatusCode === '403') {
          this.$store.dispatch('global/toast', Status);
          this.updataCodPic()
        }
        this.disabled = false;
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
